<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>学生试卷列表</title>

    <%@include file="/WEB-INF/views/commons/common.jsp" %>

    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
    <link rel="stylesheet" type="text/css"
          href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">
    <link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/jquery-searchableSelect/jquery.searchableSelect.css">


</head>
<body data-grid="easyui">
<div class="path"><span class="right-index">&gt;</span> 现在的位置：学生列表</div>
<div class="tab-content">
    <div class="fold_ex">
        <h2 class="title-h2">
			<span style="width:100%;">
				<button type="button" class="btn search-btn" data-method="exportStudentPapers"><i
                        class="fa fa-download"></i>&nbsp;导出试卷&nbsp;</button>
			</span>
            <a href="javascript:void(0);" class="hide-next-btn">收起</a>
        </h2>

        <div>
            <form action="#">
                <table class="search-table container">
                    <tr>
                        <td class="text-right col-xs-2">搜索学员</td>
                        <td class="col-xs-4">
                            <select id="searchStudent" name="userId">
                            </select>
                        </td>
                        <td class="text-right col-xs-2"></td>
                        <td class="col-xs-4">
                        </td>
                    </tr>
                    <tr>
                        <td class="text-right col-xs-2"></td>
                        <td class="text-right">
                            <button type="button" class="btn search-btn" data-method="search"><i
                                    class="fa fa-search"></i>&nbsp;查询&nbsp;
                            </button>
                            <button type="button" class="btn search-btn" data-method="clear"><i class="fa fa-trash"></i>&nbsp;清空&nbsp;
                            </button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

        <hr class="search-line"/>
        <table class="easyui-datagrid">
            <thead>
            <tr>
                <th data-options="field:'paperResultId',checkbox:true">选择</th>
                <th data-options="field:'paperName',width:150,align:'center'">试卷名称</th>
                <th data-options="field:'exportStatusVal',width:50,align:'center'">导出状态</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>


<script type="text/javascript" src="${base_href}/static/ui-frame/iframe-auto-height/jquery.autoheight.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap/3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap-dialog3/js/bootstrap-dialog.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/easyui.util.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-searchableSelect/jquery.searchableSelect.js"></script>
<script type="text/javascript"
        src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript" src="${base_href}/static/ui-frame/requirejs/2.2.0/require.js"></script>

<script type="text/javascript">
    requirejs.config({
        baseUrl: '<c:url value="/static/"/>',
        paths: {
            Grid: 'component/grid/js/ms-grid',
        },
        config: {
            'Grid': {
                contextPath: '<c:url value="/"/>',
                url: 'searchStudentPapers.json',
                method: 'post'
            },
        }
    });

    require(['Grid'], function (Grid) {
        Grid.columns({
            paperName: {
                formatter: function (value, row, index) {
                    var v = value == null ? "" : $('<div/>').text(value).html();
                    return "<a href='javaScript:void(0);' onclick=\"grid.groupName(event, " + index + ")\" class='grid-button' plain='true' title='" + v + "'><div>" + v + "</div></a>";
                },
                event: function (event, index) {
                    var row = this.grid.datagrid('getRows')[index];
                    var param = {groupId: row.groupId};

// 				var url = basePath + "/judgePaper/openAndJumpPaperPage?" + $.param(param);
                    var screenLocation = "width=800px,height=700px,top=0,left=0,menubar=yes,resizable=yes,scrollbars =yes";
                    this.windowOpen(url, "详细信息", screenLocation);
                    event.stopPropagation();
                }
            }
        });
        Grid.methods({
            exportStudentPapers: function () {
                let checked = this.grid.datagrid('getChecked');
                if(checked.length == 0){
                    BootstrapDialog.alert("请选择至少一道题目。");
                }else {
                    let resultPaperIds = new Array();
                    for (let i = 0; i < checked.length; i++) {
                        resultPaperIds.push(checked[i].paperResultId);
                    }
                    let param = {"resultPaperIds": resultPaperIds};
                    let url = basePath + "/export/word/exportStudentPapers.json";
                    // window.open(url);

                    $.ajax({
                        url: url,
                        type: "post",
                        contentType : 'application/json;charset=UTF-8',
                        dataType: "json",
                        data: JSON.stringify(param),
                        success: function (r) {
                            if(r.code === 0){
                                BootstrapDialog.alert("后台正在生成导出文件，请稍后前往我的下载页下载文件")
                            }else{
                                BootstrapDialog.alert("导出失败！原因：" + r.message)
                            }
                        }
                    })
                }

            }
        });
        $(function () {
            window.grid = Grid.events();
        })
    })
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#searchStudent').searchableSelect();
        $('.searchable-select-input').on('input',getOptions)
        $('#searchStudent').change(function () {
            console.log('hh');
        });
        function getOptions() {
            const reqValue = $('.searchable-select-input').val();
            const url = basePath + "/studentManager/searchStudent.json?reqValue=" + reqValue;
            $.ajax({
                url: url,
                type: "post",
                dataType: "json",
                async: false,
                success: function (r) {
                    // if (r == null) {
                    //     layer.msg('，请稍后再试');
                    // }
                    $('#searchStudent').empty();
                    for (let index =0; index < r.length; index++){
                        const data = r[index];
                        const option = $('<option value="' + data.userId + '">' + data.userName + '</option>');
                        // todo 绑定change事件
                        $('#searchStudent').append(option)
                    }

                    $('.searchable-select-items').empty();
                    for (let index =0; index < r.length; index++){
                        let data = r[index]
                        let item = $('<div class="searchable-select-item" data-value="'+data.userId+'">'+data.userName+"-"+data.account+'</div>');
                        $('.searchable-select-items').append(item)

                        item.on('mouseenter', function(){
                            $(this).addClass('hover');
                        }).on('mouseleave', function(){
                            $(this).removeClass('hover');
                        }).click(function(event){
                            event.stopPropagation();
                            let value = item.data('value');
                            let name = item.text();
                            $('.searchable-select-items').children().removeClass('selected')
                            $("#searchStudent option:selected").attr("selected",false);
                            $("#searchStudent").find("option[value='"+value+"']").attr("selected",true);
                            $('.searchable-select-holder').text(name);
                            item.addClass('selected');
                            $('.searchable-select-dropdown').addClass('searchable-select-hide')
                            $("button[data-method='search']").click()
                        });

                    }
                }
            })
        }
    });
</script>
</body>
</html>
